<div th:fragment="includeAccountFields">

    <h3>Account Information</h3>

    <table style="width: 40%; margin: 0 auto;">
        <tr>
            <td>First name:</td>
            <td><input type="text" name="firstName" th:value="${loginAccount != null ? loginAccount.firstName : ''}" /></td>
        </tr>
        <tr>
            <td>Last name:</td>
            <td><input type="text" name="lastName" th:value="${loginAccount != null ? loginAccount.lastName : ''}" /></td>
        </tr>
        <tr>
            <td>Email:</td>
            <td>
                <input type="text" size="40" name="email" id="email" th:value="${loginAccount != null ? loginAccount.email : ''}" onblur="checkEmail();" />
                <span id="isProperEmail"></span>
            </td>
        </tr>
        <tr>
            <td>Phone:</td>
            <td>
                <input type="text" name="phone" id="phone" th:value="${loginAccount != null ? loginAccount.phone : ''}" onblur="checkPhone();" />
                <span id="isProperPhone"></span>
            </td>
        </tr>
        <tr>
            <td>Address 1:</td>
            <td><input type="text" size="40" name="address1" th:value="${loginAccount != null ? loginAccount.address1 : ''}" /></td>
        </tr>
        <tr>
            <td>Address 2:</td>
            <td><input type="text" size="40" name="address2" th:value="${loginAccount != null ? loginAccount.address2 : ''}" /></td>
        </tr>
        <tr>
            <td>City:</td>
            <td><input type="text" name="city" th:value="${loginAccount != null ? loginAccount.city : ''}" /></td>
        </tr>
        <tr>
            <td>State:</td>
            <td><input type="text" size="4" name="state" th:value="${loginAccount != null ? loginAccount.state : ''}" /></td>
        </tr>
        <tr>
            <td>Zip:</td>
            <td><input type="text" size="10" name="zip" th:value="${loginAccount != null ? loginAccount.zip : ''}" /></td>
        </tr>
        <tr>
            <td>Country:</td>
            <td><input type="text" size="15" name="country" th:value="${loginAccount != null ? loginAccount.country : ''}" /></td>
        </tr>
    </table>

    <h3>Profile Information</h3>

    <table style="width: 40%; margin: 0 auto;">
        <tr>
            <td>Language Preference:</td>
            <td>
                <div th:replace="catalog/languages :: languages"></div>
            </td>
        </tr>
        <tr>
            <td>Favourite Category:</td>
            <td>
                <select name="favouriteCategoryId" id="favouriteCategoryId">
                    <option value="MAIN" th:selected="${loginAccount != null && loginAccount.favouriteCategory == 'MAIN'}">MAIN</option>
                    <option value="SOUTH" th:selected="${loginAccount != null && loginAccount.favouriteCategory == 'SOUTH'}">SOUTH</option>
                    <option value="NEW" th:selected="${loginAccount != null && loginAccount.favouriteCategory == 'NEW'}">NEW</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>Enable MyList</td>
            <td>
                <label>
                    <input type="radio" name="listOption1" id="ListOption1" value="1" th:checked="${loginAccount != null && loginAccount.listOption == 1}" />Yes
                </label>
                <label>
                    <input type="radio" name="listOption1" id="ListOption2" value="0" th:checked="${loginAccount != null && loginAccount.listOption == 0}" />No
                </label>
            </td>
        </tr>
        <tr>
            <td>Enable MyBanner</td>
            <td>
                <label>
                    <input type="radio" name="bannerOption1" id="bannerOption1" value="1" th:checked="${loginAccount != null && loginAccount.bannerOption == 1}" />Yes
                </label>
                <label>
                    <input type="radio" name="bannerOption1" id="bannerOption2" value="0" th:checked="${loginAccount != null && loginAccount.bannerOption == 0}" />No
                </label>
            </td>
        </tr>
    </table>
</div>